<template>
  <div class="outter-wrap">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="论文标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="期刊名称" prop="journalname">
            <el-input v-model="form.journalname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期刊级别" prop="journallevel">
            <el-input v-model="form.journallevel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="卷号" prop="volumeno">
            <el-input v-model="form.volumeno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="期号" prop="seriesno">
            <el-input v-model="form.seriesno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起始页码" prop="startpage">
            <el-input v-model="form.startpage"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="终止页码" prop="endpage">
            <el-input v-model="form.endpage"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="doi" prop="doi">
            <el-input v-model="form.doi"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发表时间" prop="publishdate">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.publishdate" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="通讯作者" prop="telauthor">
            <el-input v-model="form.telauthor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收录号" prop="captureno">
            <el-input v-model="form.captureno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="作者排名" prop="rankno">
            <el-input v-model="form.rankno"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="实证文件">
            <el-radio-group v-model="form.hasEvidence">
              <el-radio label="已上传"></el-radio>
              <el-radio label="未上传"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-link type="primary" @click="exportCurrentFile" :disabled="isdisabled">文件下载</el-link>
        </el-col>
      </el-row>
      <el-form-item  label="更新文件">
          <el-upload
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="true"
              :multiple="false"
              :on-change="addFile"
              :on-remove="removeFile"
              :auto-upload="false"
              accept=".zip"
              :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传zip压缩文件,建议≤200M</div>
          </el-upload>
        </el-form-item>
      <el-form-item>
        <el-button type="success" round @click="onSubmit('form')">确认修改</el-button>
        <el-button type="info" round @click="cancelModify">取消修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as Index_ModifyService from '@/service/index/indexService'
import * as UploadService from '@/service/upload/uploadService'
import fileDownload from "js-file-download";
import * as UUIDUtil from "@/service/utils/UUIDUtil";
export default {
  name: "EduReformPaper",
  data(){
    return {
      form: {
        id:'',//论文id
        recordid:'',//记录id
        email:'',//邮箱号
        title:"",//论文标题
        journalname:'',
        journallevel:'',
        volumeno:'',
        seriesno:'',
        startpage:'',
        endpage:'',
        doi:'',
        publishdate:'',
        telauthor:'',
        captureno:'',
        rankno:'',
        hasEvidence:false,//是否有实证文件
        evidence:'',//实证文件远程存储链接
        file:'',//实证文件对象
      },
      isdisabled:false,//是否禁用文字链接
      //表单验证规则
      rules:{
        title:[{required:true,message:"请输入论文标题",trigger:"blur"}],
        journalname:[{required:true,message:"请输入期刊名称",trigger:"blur"}],
        journallevel:[{required:true,message:"请输入期刊级别",trigger:"blur"}],
        volumeno:[{required:true,message:"请输入卷号",trigger:"blur"}],
        seriesno:[{required:true,message:"请输入期号",trigger:"blur"}],
        captureno:[{required:true,message:"请输入收录号",trigger:"blur"}],
        rankno:[{required:true,message:"请输入作者排名信息",trigger:"blur"}],
        startpage:[{required:true,message:"请输入起始页码",trigger:"blur"}],
        endpage:[{required:true,message:"请选择终止页码",trigger:"blur"}],
        doi: [{required:false,message:"建议doi",trigger:"blur"}],
        publishdate: [{required:true,message:"请输入发表日期",trigger:"blur"}],
        telauthor: [{required:false,message:"建议填写通讯作者",trigger:"blur"}],
      }
    }
  },
  computed:{
    onEditData(){
      return this.$store.state.editData;
    }
  },
  watch:{
    onEditData(newVal){
      if(newVal&&newVal.type=="教学论文"&&newVal.data){
        console.log(newVal)
        this.form.id=newVal.data.id;
        this.form.recordid=newVal.data.author.workid;
        this.form.email=newVal.data.author.author;
        this.form.title=newVal.data.title;
        this.form.journalname=newVal.data.journalname;
        this.form.journallevel=newVal.data.journallevel;
        this.form.volumeno=newVal.data.volumeno;
        this.form.seriesno=newVal.data.seriesno;
        this.form.startpage=newVal.data.pagestart;
        this.form.endpage=newVal.data.pageend;
        this.form.doi=newVal.data.doi;
        this.form.publishdate=newVal.data.publishdate;
        this.form.telauthor=newVal.data.telauthor;
        this.form.captureno=newVal.data.captureno;
        this.form.rankno=newVal.data.author.rankno;
        this.form.hasEvidence=newVal.data.author.evidence?"已上传":"未上传";
        this.form.evidence=newVal.data.author.evidence;
        if (this.form.evidence){
          this.isdisabled=false;
        }else{
          this.isdisabled=true;
        }

      }
    }
  },
  methods: {
    //取消修改
    cancelModify(){
      //修改全局状态值-隐藏弹出窗口
      this.$store.commit("setIsShowPopOver",false);
    },
    //添加文件操作
    addFile(file){
      this.form.file=file.raw;
    },
    //移除文件操作
    removeFile(){
      this.form.file=undefined;
    },
    exportCurrentFile(){
      if (!this.form.evidence){
        this.$message.error("文件导出失败!")
        return false;
      }
      UploadService.downloadFile(this.form.email,this.form.evidence).then(res=>{
        fileDownload(res.data,UUIDUtil.uuid()+".zip");
        this.$message.success("正在导出文件!")
      }).catch(()=>{
        this.$message.error("文件导出失败!")
      })
    },
    //更新用户信息
    updateInfo(){
      //更新用户信息
      Index_ModifyService.updateEduReformPaperInfo({
        title:this.form.title,
        journalname:this.form.journalname,
        journallevel:this.form.journallevel,
        publishdate:this.form.publishdate,
        volumeno:this.form.volumeno,
        seriesno:this.form.seriesno,
        pagestart:this.form.startpage,
        pageend:this.form.endpage,
        doi:this.form.doi,
        telauthor:this.form.telauthor,
        captureno:this.form.captureno,
        "author.author":this.form.email,
        "author.workid":this.form.recordid,
        "author.rankno":this.form.rankno,
        "author.evidence":this.form.evidence,
      }).then(res=>{
        if (res.data==1){
          this.$message.success("修改信息已提交");
          //修改store状态值,关闭窗口
          this.$store.dispatch("setIsShowPopOverAsync",false);
          //重新请求分页数据-数据刷新
          this.$store.dispatch("setUpdateInfoAsync",new Date().getTime())
        }else {
          this.$message.error("信息修改失败,请稍后再试!")
        }
      }).catch(()=>{
        this.$message.error("信息修改失败,请稍后再试!")
      })
    },
    //更新文件和用户信息
    updateFileAndInfo(){
      if (this.form.evidence){
        //删除原有文件
        UploadService.deleteFile({
          email:this.form.email,
          url:this.form.evidence,
        }).then((res)=>{
          console.log(res)
        }).catch(()=>{})
      }
      //上传新文件
      let formdata = new FormData();
      formdata.append("file",this.form.file);
      formdata.append("username",this.form.email);
      UploadService.uploadFile(formdata).then(res=>{
        if (res.data && res.data.status) {
          //文件已上传成功
          this.$message({
            message: '已覆盖原始文件！',
            type: 'success',
          })
          //重设evidence属性
          this.form.evidence=res.data.url;
          //更新用户信息
          this.updateInfo();
        }else {
          this.$message.error("文件覆盖失败!")
        }
      }).catch(()=>{
        this.$message.error("文件覆盖失败,请稍后再试")
      })
    },
    onSubmit(form) {
      console.log(this.form);
      this.$refs[form].validate(valid=>{
        if (valid){
          if (this.form.file){
            console.log("pre-更新文件")
            //更新文件和用户信息
            this.updateFileAndInfo();
          }else {
            console.log("nopre-更新用户信息")
            //直接更新用户信息
            this.updateInfo();
          }
        }else {
          this.$message.error("信息填写不完整!")
        }
      })
    }
  }
}
</script>

<style scoped>
.outter-wrap{
  padding: 15px;
}
</style>